<template>
  <div class="user-container">
    <div class="page-content-wrap">
      <div class="user-title">我的预定</div>

      <div class="reserve-list">
        <div class="item" v-for="item in list">
          <img v-if="item.type.photo"
               :src="uploadServer +  '/upload/image/' +item.type.photo"
          />
          <div class="cancel-btn">
            <el-button v-if="item.status === 'WAITING'" type="info" size="small" @click="onClickCancel(item)">取消预定
            </el-button>
          </div>
          <div class="left">
            <div class="row">
              <div class="label">用房时间：</div>
              <div class="value" style="display: flex;flex-wrap: wrap;width: 300px;">
                <div class="date-item" v-for="k in item.reserveDate">{{ k }}</div>
              </div>
            </div>
            <div class="row">
              <div class="label">房间类型：</div>
              <div class="value" style="font-weight: bold">{{ item.type.name }}</div>
            </div>
            <div class="row">
              <div class="label">订房日期：</div>
              <div class="value">{{ $filters.formatDate(item.createTime) }}</div>
            </div>
            <div class="row">
              <div class="label">费用：</div>
              <div class="value"><span style="font-weight: bold">{{ item.price }}</span> 元</div>
            </div>
            <div class="row">
              <div class="label">状态：</div>
              <div class="value">
                <el-tag v-if="item.status === 'WAITING'">等待工作人员确认</el-tag>
                <el-tag v-else-if="item.status === 'CONFIRM'" type="success">订单已确认，等待入住</el-tag>
                <el-tag v-else-if="item.status === 'BACK'" type="error">房间已满，退回</el-tag>
                <el-tag v-else-if="item.status === 'CANCEL'" type="warning">已取消</el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="empty" v-if="!loading && list.length === 0">
        暂无信息
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import $api from '@/api'
import {ElNotification} from "element-plus";

const rule = ref('WAITING')
const uploadServer = import.meta.env.VITE_SERVER
onMounted(() => {
  getList()
})
/**
 * 获取我的订单
 */
const loading = ref(true)
const list = ref([])
const getList = () => {
  loading.value = true
  list.value = []
  $api.webApi.myOrder().then(res => {
    res.results.forEach(item => {
      item.reserveDate = JSON.parse(item.reserveDate)
    })
    list.value = res.results
    loading.value = false
  })
}
/**
 * 取消订单
 */
const onClickCancel = (order: any) => {
  $api.webApi.cancelOrder(order.id).then(res => {
    ElNotification({
      title: '成功',
      message: '取消成功！',
      type: 'success',
    })
    getList();
  })
}
</script>

<style scoped lang="scss">
.user-container {
  width: 100%;
  min-height: 600px;
  background-color: #e6ebef;
}


.reserve-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 40px;

  > .item {
    width: calc(50% - 20px);
    margin-bottom: 20px;
    min-height: 40px;
    background-color: #fff;
    padding: 10px 18px;
    position: relative;

    > img {
      top: 10px;
      right: 10px;
      width: 180px;
      position: absolute;
    }

    > .cancel-btn {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    > .left {
      > .row {
        display: flex;
        font-size: 14px;
        color: #3a3a3a;
        line-height: 2;

        > .label {
          width: 80px;
        }

        > .value {
          font-style: italic;
        }
      }
    }

  }
}

.date-item {
  width: 100px;
  border: 1px solid #3a3a3a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #666666;
  width: 100%;
  height: 300px;
}
</style>